<template>
  <div class="page-container">
    <pf-table
      ref="pfTable"
      v-model="form"
      row-key="id"
      default-expand-all
      :show-pagination="false"
      :columns="columns"
      :form-items="formItems"
      :tree-props="{children: 'childrenDeptResponses'}"
      @get-table-data="getTableData"
    >
      <template #handle-area>
        <el-button type="primary" @click="addHandle">添加部门/公司</el-button>
        <el-button type="primary" @click="exportHandle">导出</el-button>
      </template>
      <template #handle="{row}">
        <el-button type="text" size="small" @click="editHandle(row)">编辑</el-button>
        <el-button type="text" class="danger-text-button" size="small" @click="deleteHandle(row)">删除</el-button>
      </template>
    </pf-table>
    <AddDepart
      v-if="showDept"
      :id="deptId"
      :type="type"
      @close="closeHandle"
      @confirm="confirmHandle"
    />
  </div>
</template>

<script>
import { getDeptList, exportDeptList, deleteDept } from '@/api/system'
import AddDepart from './AddDepart.vue'

export default {
  name: 'Department',
  components: {
    AddDepart
  },
  data() {
    return {
      type: 'add',
      showDept: false,
      deptId: '',
      form: {},
      loading: false
    }
  },
  computed: {
    columns() {
      const attrs = { 'min-width': '150px' }
      return [
        { label: '部门/公司名称', prop: 'deptName', attrs },
        { label: '成员数', prop: 'memberCount', attrs },
        { label: '联系人', prop: 'email', attrs },
        { label: '联系人手机号', prop: 'mobile', attrs },
        { label: '属性', prop: 'deptTypeStr', attrs },
        { label: '创建时间', prop: 'createTime', attrs },
        { label: '操作', slot: 'handle', attrs: { width: '150px', fixed: 'right' }}
      ]
    },
    formItems() {
      const labelWidth = '120px'
      return [
        { type: 'input', label: '部门/公司名称', prop: 'deptName', formItemAttrs: { labelWidth }},
        { type: 'input', label: '联系人', prop: 'email', formItemAttrs: { labelWidth }},
        { type: 'input', label: '联系人手机号', prop: 'mobile', formItemAttrs: { labelWidth }},
        {
          type: 'date',
          label: '创建时间',
          prop: 'dateRange',
          span: 8,
          attrs: {
            type: 'datetimerange'
          },
          formItemAttrs: { labelWidth }
        }
      ]
    }
  },

  methods: {

    getTableData({ ...formQuery }, done) {
      this.loading = true
      const [createStartTime = '', createEndTime = ''] = formQuery?.dateRange || []
      const data = {
        createStartTime,
        createEndTime,
        nested: true,
        ...formQuery
      }
      getDeptList(data).then(res => {
        this.loading = false
        done({ data: res || [] })
      }).catch(() => {
        done({ data: [] })
        this.loading = false
      })
    },

    // 新增
    addHandle() {
      this.type = 'add'
      this.deptId = ''
      this.showDept = true
    },

    // 导出
    exportHandle() {
      const data = {
        nested: true,
        ...this.form
      }
      exportDeptList(data).then(() => {
      }).catch(() => {
      })
    },

    // 编辑
    editHandle(row) {
      this.type = 'edit'
      this.deptId = row.id
      this.showDept = true
    },

    // 删除
    deleteHandle(row) {
      const data = {
        id: row.id
      }
      this.$confirm('确定删除该部门/公司吗?', '提示', {
        type: 'warning'
      }).then(() => {
        deleteDept(data).then(() => {
          this.$message.success('删除成功')
          this.$refs.pfTable.getTableData()
        }).catch(() => {})
      }).catch(() => {})
    },

    // 关闭弹窗
    closeHandle() {
      this.showDept = false
    },

    // 确定
    confirmHandle() {
      this.$refs.pfTable.getTableData()
    }
  }
}
</script>

<style lang="scss" scoped></style>
